<template>
  <div class="one_myidle_main ml-3">
    <div class="row block center pt-3 pl-2 ml-1 border-bottom pb-3"
         style="background-color:rgba(255,255,255,0)">
      <div class="pt-1" >
        <el-page-header @back="goBack">
        </el-page-header>
      </div>
    </div>
<!--    修改表单-->
    <div class="mt-4">

      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form" status-icon>

        <el-form-item label="闲置物品名称" :label-width="formLabelWidth" prop="idle_item_name">
          <el-input v-model="form.idle_item_name"
                    type="text"
                    maxlength="20"
                    autocomplete="off"
                    show-word-limit
                    placeholder="请输入闲置物品名，3-20个字符..."></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="闲置物品类别" :label-width="formLabelWidth" prop="idle_item_category">
              <el-select v-model="form.idle_item_category" placeholder="选择闲置物品类别...">
                <el-option label="考研笔记" value="1"></el-option>
                <el-option label="书籍" value="2"></el-option>
                <el-option label="文具" value="3"></el-option>
                <el-option label="考卷" value="4"></el-option>
                <el-option label="其他" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="科目" :label-width="formLabelWidth" prop="idle_item_subject">
              <el-select v-model="form.idle_item_subject" placeholder="选择闲置物品科目...">
                <el-option label="英语" value="1"></el-option>
                <el-option label="数学" value="2"></el-option>
                <el-option label="政治" value="3"></el-option>
                <el-option label="专业" value="4"></el-option>
                <el-option label="其他" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item label="新旧程度" :label-width="formLabelWidth" prop="idle_item_degree">
              <el-select v-model="form.idle_item_degree" placeholder="选择闲置物品新旧程度...">
                <el-option label="全新" value="1"></el-option>
                <el-option label="9成新" value="2"></el-option>
                <el-option label="5成新" value="3"></el-option>
                <el-option label="使用过" value="4"></el-option>
                <el-option label="破旧点" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="闲置物品价格" :label-width="formLabelWidth" prop="idle_item_price" required>
              <el-input-number v-model="form.idle_item_price" :precision="2" :step="0.1" :max="500"></el-input-number>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="闲置物品描述" :label-width="formLabelWidth" prop="idle_item_info">
          <el-input
              show-word-limit
              type="textarea"
              maxlength="300"
              :rows="10"
              placeholder="请输入描述，1-300个字符"
              v-model="form.idle_item_info">
          </el-input>
        </el-form-item>

        <div class="ml-4 pb-2">
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">修 改</el-button>
            <el-button @click="resetForm('form')">重 置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>




  </div>
</template>

<script>
import {getIdleInfoByIdleID,updateIdle} from '@/api/Resale'

export default {
name: "one_myidle",
  data(){
     return{
       idle_comment_id:this.$route.query.idle_comment_id,
       // idle_category_value:'',
       // idle_degree_value:'',
       // idle_subject_value:'',
       form: {
         idle_item_name:'',
         idle_item_price:'',
         idle_item_degree:'',
         idle_item_category:'',
         idle_item_subject:'',
         idle_item_info:'',
       },
       //表单校验规则
       rules: {
         idle_item_name: [
           { required: true, message: '请输入闲置物品名称', trigger: 'blur'},
           { min:3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
         ],
         idle_item_price: [
           {type:"number", min:0,max:500,required: true, message: '请输入正确的闲置物品价格', trigger: 'blur'}
         ],
         idle_item_degree: [
           { required: true, message: '请选择闲置物品新旧程度', trigger: 'change'}
         ],
         idle_item_category: [
           {required: true, message: '请选择闲置物品类别', trigger: 'change'}
         ],
         idle_item_subject: [
           { required: true, message: '请选择闲置物品科目', trigger: 'change'}
         ],
         idle_item_info: [
           { min:1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur'}
         ]

       },
       formLabelWidth: '120px',
     }
  },
  methods:{
    //根据idle_item_id获取闲置物品信息
    init(){

      getIdleInfoByIdleID({
        idle_item_id:this.$route.query.idle_item_id
      }).then(res=>{
        this.form.idle_item_name=res.data.data.idle_item_name;
        this.form.idle_item_price=res.data.data.idle_item_price;
        this.form.idle_item_info=res.data.data.idle_item_info;


        if(res.data.data.idle_item_category===1){
          this.form.idle_item_category="考研笔记";

        }else if(res.data.data.idle_item_category===2){
          this.form.idle_item_category="书籍";

        }else if(res.data.data.idle_item_category===3){
          this.form.idle_item_category="文具";

        }else if(res.data.data.idle_item_category===4){
          this.form.idle_item_category="考卷";
        }else if(res.data.data.idle_item_category===5){
          this.form.idle_item_category="其他";
        }


        if(res.data.data.idle_item_subject===1){
          this.form.idle_item_subject="英语";

        }else if(res.data.data.idle_item_subject===2){
          this.form.idle_item_subject="数学";

        }else if(res.data.data.idle_item_subject===3){
          this.form.idle_item_subject="政治";

        }else if(res.data.data.idle_item_subject===4){
          this.form.idle_item_subject="专业";

        }else if(res.data.data.idle_item_subject===5){
          this.form.idle_item_subject="其他";

        }



        if(res.data.data.idle_item_degree===1){
          this.form.idle_item_degree="全新";

        }else if(res.data.data.idle_item_degree===2){
          this.form.idle_item_degree="9成新";

        }else if(res.data.data.idle_item_degree===3){
          this.form.idle_item_degree="5成新";

        }else if(res.data.data.idle_item_degree===4){
          this.form.idle_item_degree="使用过";

        }else if(res.data.data.idle_item_degree===5){
          this.form.idle_item_degree="破旧点";

        }
      })




    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //修改数据
    updateSave()
    {

      updateIdle({
        form:this.form,idle_item_id:this.$route.query.idle_item_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1)
        {
          this.$msg.success("修改成功！");

        }
        else
        {
          this.$msg.success("修改失败！");
        }


        if(this.form.idle_item_category==1){
          this.form.idle_item_category="考研笔记";

        }else if(this.form.idle_item_category==2){
          this.form.idle_item_category="书籍";

        }else if(this.form.idle_item_category==3){
          this.form.idle_item_category="文具";

        }else if( this.form.idle_item_category==4){
          this.form.idle_item_category="考卷";

        }else if( this.form.idle_item_category==5){
          this.form.idle_item_category="其他";

        }


        if( this.form.idle_item_subject==1){
          this.form.idle_item_subject="英语";

        }else if(this.form.idle_item_subject==2){
          this.form.idle_item_subject="数学";

        }else if(this.form.idle_item_subject==3){
          this.form.idle_item_subject="政治";

        }else if( this.form.idle_item_subject==4){
          this.form.idle_item_subject="专业";

        }else if( this.form.idle_item_subject==5){
          this.form.idle_item_subject="其他";

        }


        if(this.form.idle_item_degree==1){
          this.form.idle_item_degree="全新";

        }else if(this.form.idle_item_degree==2){
          this.form.idle_item_degree="9成新";

        }else if(this.form.idle_item_degree==3){
          this.form.idle_item_degree="5成新";

        }else if(this.form.idle_item_degree==4){
          this.form.idle_item_degree="使用过";

        }else if(this.form.idle_item_degree==5){
          this.form.idle_item_degree="破旧点";

        }
      })

    },
    //发布 修改弹窗
    submitForm(formName) {

      //验证
      this.$refs[formName].validate((valid) => {
        if (valid) {

          //再次确认
          this.$confirm('确认修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {


            if(this.form.idle_item_category==="考研笔记"){
              this.form.idle_item_category=1;

            }else if(this.form.idle_item_category==="书籍"){
              this.form.idle_item_category=2;

            }else if(this.form.idle_item_category==="文具"){
              this.form.idle_item_category=3;

            }else if( this.form.idle_item_category==="考卷"){
              this.form.idle_item_category=4;

            }else if( this.form.idle_item_category==="其他"){
              this.form.idle_item_category=5;

            }


            if( this.form.idle_item_subject==="英语"){
              this.form.idle_item_subject=1;

            }else if(this.form.idle_item_subject==="数学"){
              this.form.idle_item_subject=2;

            }else if(this.form.idle_item_subject==="政治"){
              this.form.idle_item_subject=3;

            }else if( this.form.idle_item_subject==="专业"){
              this.form.idle_item_subject=4;

            }else if( this.form.idle_item_subject==="其他"){
              this.form.idle_item_subject=5;

            }


            if(this.form.idle_item_degree==="全新"){
              this.form.idle_item_degree=1;

            }else if(this.form.idle_item_degree==="9成新"){
              this.form.idle_item_degree=2;

            }else if(this.form.idle_item_degree==="5成新"){
              this.form.idle_item_degree=3;

            }else if(this.form.idle_item_degree==="使用过"){
              this.form.idle_item_degree=4;

            }else if(this.form.idle_item_degree==="破旧点"){
              this.form.idle_item_degree=5;

            }

            this.updateSave();


          }).catch(() => {
            this.$msg.error("修改失败！");
          });

        } else {
          this.$msg.error("取消修改！");
          return false;
        }
      });
    },
    //  清空发布的弹窗的内容 重置
    resetForm(formName) {

      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs[formName].resetFields();
      });

    },



  },
  watch: {

  },
  created() {
    let _this=this;
    _this.init();
  }
}
</script>

<style scoped>

</style>
